<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/static/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link href="/static/css/fonts.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/mit_app_inventor.css">
    <script type="text/javascript">
     <!--//--><![CDATA[// ><!--

                                   var gotoappinventor = function() {
                                       var referrer = document.location.pathname;
                                       var patt = /.*hour-of-code.*/;
                                       if (referrer.match(patt)) {
                                           window.open("http://code.appinventor.mit.edu/", "new");
                                       } else {
                                           window.open("http://ai2.appinventor.mit.edu/", "new");
                                       }
                                   }
     //--><!]]>
    </script>
    <title>Layout</title></head>
<body class="mit_app_inventor"><nav class="navbar navbar-expand-xl navbar-light">
    <a class="navbar-brand" href="http://appinventor.mit.edu/">
	<img src="/static/images/logo2.png" alt="Logo">
    </a>
    <button type="button" class="btn create-btn" style="margin-right: 20px;" onclick="gotoappinventor();">Create Apps!</button>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
            aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle Navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
	<ul class="navbar-nav" style="margin-left: auto;">
	    <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    About
		</a>
		<div class="dropdown-menu">
		    <a class="dropdown-item" href="http://appinventor.mit.edu/about-us">About App Inventor</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/our-team">Our Team</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/expert-trainers">Expert Trainers</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/app-month-gallery">App of the Month</a>
                    <a class="dropdown-item"
                       href="http://appinventor.mit.edu/ai2/ReleaseNotes">Release Notes</a>
                    <a class="dropdown-item" href="http://appinventor.mit.edu/about/termsofservice" target="_blank">Terms of Service</a>
		</div>
	    </li>
	    <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    Educators
		</a>
		<div class="dropdown-menu">
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/teach" target="_blank">Teach</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/ai2/tutorials">Tutorials</a>
		</div>
	    </li>
	    <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu/news" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    News
		</a>
		<div class="dropdown-menu">
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/news">In the news</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/events">Events</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/stories">Stories from the field</a>
		</div>
	    </li>
	    <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu/explore/resources" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    Resources
		</a>
		<div class="dropdown-menu">
                    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/get-started">Get Started</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/library">Documentation</a>
		    <a class="dropdown-item" href="https://community.appinventor.mit.edu"
                       target="_blank">Forums</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/ai2/tutorials">Tutorials</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/books">App Inventor Books</a>
		    <a class="dropdown-item"
                       href="https://github.com/mit-cml/appinventor-sources"
                       target="_blank">Open Source Information</a>
	            <a class="dropdown-item" href="http://appinventor.mit.edu/explore/research">Research</a>
                    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/hour-of-code">Hour of Code</a>
                    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/resources">Additional Resources</a>
		</div>
	    </li>
            <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    Blogs
		</a>
                <div class="dropdown-menu">
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/blog">App Inventor Blog</a>
	        </div>
            </li>
        </ul>
        <div style="display: inline-flex;margin-left:auto;margin-right:0">
	    <a href="https://giving.mit.edu/give/to?fundId=3832320" target="_blank">
                <button type="button" class="btn donate-btn" style="margin-right: 20px;">Donate</button></a>
            <script>
             (function() {
                 var cx = '005719495929270354943:tlvxrelje-e';
                 var gcse = document.createElement('script');
                 gcse.type = 'text/javascript';
                 gcse.async = true;
                 gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                            '//www.google.com/cse/cse.js?cx=' + cx;
                 var s = document.getElementsByTagName('script')[0];
                 s.parentNode.insertBefore(gcse, s);
             })();
            </script>
            <gcse:searchbox-only></gcse:searchbox-only>
        </div>
	<!-- <form class="form-inline" action="/action_page.php">
	     <div class="form-group has-search">
	     <span class="fa fa-search form-control-feedback"></span>
	     <input type="text" class="form-control" placeholder="Search">
	     </div>
	     </form> -->
    </div>
</nav>
<div class="default-page">
            <div class="header">
	        <h1 class="font-weight-bold text-center offset-xl-2 col-xl-8">Layout</h1>
            </div>
            <div class="container-fluid">
                <article class="documentation">
<p><a href="index.html">« Back to index</a></p>
<h1 id="layout">Layout</h1>

<p>Table of Contents:</p>

<ul>
  <li><a href="#AbsoluteArrangement">AbsoluteArrangement</a></li>
  <li><a href="#HorizontalArrangement">HorizontalArrangement</a></li>
  <li><a href="#HorizontalScrollArrangement">HorizontalScrollArrangement</a></li>
  <li><a href="#TableArrangement">TableArrangement</a></li>
  <li><a href="#VerticalArrangement">VerticalArrangement</a></li>
  <li><a href="#VerticalScrollArrangement">VerticalScrollArrangement</a></li>
</ul>

<h2 id="AbsoluteArrangement">AbsoluteArrangement</h2>

<p>Container for components that arranges them absolutely.</p>

<h3 id="AbsoluteArrangement-Properties">Properties</h3>

<dl class="properties">
  <dt id="AbsoluteArrangement.BackgroundColor" class="color"><em>BackgroundColor</em></dt>
  <dd>Specifies the button’s background color as an alpha-red-green-blue integer.
 If the parameter is <a href="#Component.COLOR"><code class="highlighter-rouge">Component</code>’s <code class="highlighter-rouge">COLOR</code></a>, the original beveling is
 restored. If an Image has been set, the color change will not be visible
 until the Image is removed.</dd>
  <dt id="AbsoluteArrangement.Height" class="number bo"><em>Height</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">AbsoluteArrangement</code>’s vertical height, measured in pixels.</dd>
  <dt id="AbsoluteArrangement.HeightPercent" class="number wo bo"><em>HeightPercent</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">AbsoluteArrangement</code>’s vertical height as a percentage
 of the <a href="userinterface.html#Screen.Height"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Height</code></a>.</dd>
  <dt id="AbsoluteArrangement.Image" class="text"><em>Image</em></dt>
  <dd>Specifies the path of the button’s image.</dd>
  <dt id="AbsoluteArrangement.Left" class="number"><em>Left</em></dt>
  <dd>Specifies the position of the Left edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="AbsoluteArrangement.Top" class="number"><em>Top</em></dt>
  <dd>Specifies the position of the Top edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="AbsoluteArrangement.Visible" class="boolean"><em>Visible</em></dt>
  <dd>Specifies whether the <code class="highlighter-rouge">AbsoluteArrangement</code> should be visible on the screen.  Value is <code class="logic block highlighter-rouge">true</code>
 if the <code class="highlighter-rouge">AbsoluteArrangement</code> is showing and <code class="logic block highlighter-rouge">false</code> if hidden.</dd>
  <dt id="AbsoluteArrangement.Width" class="number bo"><em>Width</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">AbsoluteArrangement</code>, measured in pixels.</dd>
  <dt id="AbsoluteArrangement.WidthPercent" class="number wo bo"><em>WidthPercent</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">AbsoluteArrangement</code> as a percentage
 of the <a href="userinterface.html#Screen.Width"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Width</code></a>.</dd>
</dl>

<h3 id="AbsoluteArrangement-Events">Events</h3>

<p class="events">None</p>

<h3 id="AbsoluteArrangement-Methods">Methods</h3>

<p class="methods">None</p>

<h2 id="HorizontalArrangement">HorizontalArrangement</h2>

<p><img src="images/horizontalarrangement.png" alt="HorizontalArrangement icon" /></p>

<p>Use a horizontal arrangement component to display a group of components laid out from left to
 right.</p>

<p>This component is a formatting element in which you place components that should be displayed
 from left to right. If you want to have components displayed one over another, use
 <a href="#VerticalArrangement"><code class="highlighter-rouge">VerticalArrangement</code></a> instead.</p>

<p>In a <code class="highlighter-rouge">HorizontalArrangement</code>, components are arranged along the horizontal axis, vertically
 center-aligned.</p>

<p>If a <code class="highlighter-rouge">HorizontalArrangement</code>’s <a href="#HorizontalArrangement.Height"><code class="highlighter-rouge">Height</code></a> property is set to <code class="highlighter-rouge">Automatic</code>, the actual
 height of the arrangement is determined by the tallest component in the arrangement whose
 <a href="#HorizontalArrangement.Height"><code class="highlighter-rouge">Height</code></a> property is not set to <code class="highlighter-rouge">Fill Parent</code>. If a <code class="highlighter-rouge">HorizontalArrangment</code>’s
 <a href="#HorizontalArrangement.Height"><code class="highlighter-rouge">Height</code></a> property is set to <code class="highlighter-rouge">Automatic</code> and it contains only components whose <code class="highlighter-rouge">Height</code>
 properties are set to <code class="highlighter-rouge">Fill Parent</code>, the actual height of the arrangement is calculated using
 the automatic heights of the components. If a <code class="highlighter-rouge">HorizontalArrangement</code>’s <a href="#HorizontalArrangement.Height"><code class="highlighter-rouge">Height</code></a>
 property is set to <code class="highlighter-rouge">Automatic</code> and it is empty, the <a href="#HorizontalArrangement.Height"><code class="highlighter-rouge">Height</code></a> will be 100.</p>

<p>If a <code class="highlighter-rouge">HorizontalArrangement</code>’s <a href="#HorizontalArrangement.Width"><code class="highlighter-rouge">Width</code></a> property is set to <code class="highlighter-rouge">Automatic</code>, the actual width
 of the arrangement is determined by the sum of the widths of the components. <strong>If a
 <code class="highlighter-rouge">HorizontalArrangement</code>’s <a href="#HorizontalArrangement.Width"><code class="highlighter-rouge">Width</code></a> property is set to <code class="highlighter-rouge">Automatic</code>, any components whose
 <a href="#HorizontalArrangement.Width"><code class="highlighter-rouge">Width</code></a> properties are set to <code class="highlighter-rouge">Fill Parent</code> will behave as if they were set to
 <code class="highlighter-rouge">Automatic</code>.</strong></p>

<p>If a <code class="highlighter-rouge">HorizontalArrangement</code>’s <a href="#HorizontalArrangement.Width"><code class="highlighter-rouge">Width</code></a> properties are set to <code class="highlighter-rouge">Fill Parent</code> will equally
 take up the width not occupied by other components.</p>

<h3 id="HorizontalArrangement-Properties">Properties</h3>

<dl class="properties">
  <dt id="HorizontalArrangement.AlignHorizontal" class="number"><em>AlignHorizontal</em></dt>
  <dd>A number that encodes how contents of the <code class="highlighter-rouge">HorizontalArrangement</code> are aligned horizontally. The choices
 are: <code class="highlighter-rouge">1</code> = left aligned, <code class="highlighter-rouge">2</code> = right aligned, <code class="highlighter-rouge">3</code> = horizontally centered. Alignment has no
 effect if the <code class="highlighter-rouge">HorizontalArrangement</code>’s <a href="#HorizontalArrangement.Width"><code class="highlighter-rouge">Width</code></a> is <code class="highlighter-rouge">Automatic</code>.</dd>
  <dt id="HorizontalArrangement.AlignVertical" class="number"><em>AlignVertical</em></dt>
  <dd>A number that encodes how the contents of the <code class="highlighter-rouge">HorizontalArrangement</code> are aligned vertically. The choices
 are: <code class="highlighter-rouge">1</code> = aligned at the top, <code class="highlighter-rouge">2</code> = vertically centered, <code class="highlighter-rouge">3</code> = aligned at the bottom.
 Alignment has no effect if the <code class="highlighter-rouge">HorizontalArrangement</code>’s <a href="#HorizontalArrangement.Height"><code class="highlighter-rouge">Height</code></a> is <code class="highlighter-rouge">Automatic</code>.</dd>
  <dt id="HorizontalArrangement.BackgroundColor" class="color"><em>BackgroundColor</em></dt>
  <dd>Specifies the background color of the HorizontalArrangement as an alpha-red-green-blue
 integer.  If an Image has been set, the color change will not be visible
 until the Image is removed.</dd>
  <dt id="HorizontalArrangement.Height" class="number bo"><em>Height</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">HorizontalArrangement</code>’s vertical height, measured in pixels.</dd>
  <dt id="HorizontalArrangement.HeightPercent" class="number wo bo"><em>HeightPercent</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">HorizontalArrangement</code>’s vertical height as a percentage
 of the <a href="userinterface.html#Screen.Height"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Height</code></a>.</dd>
  <dt id="HorizontalArrangement.Image" class="text"><em>Image</em></dt>
  <dd>Specifies the path of the background image of the <code class="highlighter-rouge">HorizontalArrangement</code>.</dd>
  <dt id="HorizontalArrangement.Left" class="number"><em>Left</em></dt>
  <dd>Specifies the position of the Left edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="HorizontalArrangement.Top" class="number"><em>Top</em></dt>
  <dd>Specifies the position of the Top edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="HorizontalArrangement.Visible" class="boolean"><em>Visible</em></dt>
  <dd>Specifies whether the <code class="highlighter-rouge">HorizontalArrangement</code> should be visible on the screen.  Value is <code class="logic block highlighter-rouge">true</code>
 if the <code class="highlighter-rouge">HorizontalArrangement</code> is showing and <code class="logic block highlighter-rouge">false</code> if hidden.</dd>
  <dt id="HorizontalArrangement.Width" class="number bo"><em>Width</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">HorizontalArrangement</code>, measured in pixels.</dd>
  <dt id="HorizontalArrangement.WidthPercent" class="number wo bo"><em>WidthPercent</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">HorizontalArrangement</code> as a percentage
 of the <a href="userinterface.html#Screen.Width"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Width</code></a>.</dd>
</dl>

<h3 id="HorizontalArrangement-Events">Events</h3>

<p class="events">None</p>

<h3 id="HorizontalArrangement-Methods">Methods</h3>

<p class="methods">None</p>

<h2 id="HorizontalScrollArrangement">HorizontalScrollArrangement</h2>

<p>A formatting element in which to place components that should be displayed from left to right.
 If you wish to have components displayed one over another, use <a href="#VerticalScrollArrangement"><code class="highlighter-rouge">VerticalScrollArrangement</code></a>
 instead.</p>

<p>This version is scrollable.</p>

<h3 id="HorizontalScrollArrangement-Properties">Properties</h3>

<dl class="properties">
  <dt id="HorizontalScrollArrangement.AlignHorizontal" class="number"><em>AlignHorizontal</em></dt>
  <dd>A number that encodes how contents of the <code class="highlighter-rouge">HorizontalScrollArrangement</code> are aligned horizontally. The choices
 are: <code class="highlighter-rouge">1</code> = left aligned, <code class="highlighter-rouge">2</code> = right aligned, <code class="highlighter-rouge">3</code> = horizontally centered. Alignment has no
 effect if the <code class="highlighter-rouge">HorizontalScrollArrangement</code>’s <a href="#HorizontalScrollArrangement.Width"><code class="highlighter-rouge">Width</code></a> is <code class="highlighter-rouge">Automatic</code>.</dd>
  <dt id="HorizontalScrollArrangement.AlignVertical" class="number"><em>AlignVertical</em></dt>
  <dd>A number that encodes how the contents of the <code class="highlighter-rouge">HorizontalScrollArrangement</code> are aligned vertically. The choices
 are: <code class="highlighter-rouge">1</code> = aligned at the top, <code class="highlighter-rouge">2</code> = vertically centered, <code class="highlighter-rouge">3</code> = aligned at the bottom.
 Alignment has no effect if the <code class="highlighter-rouge">HorizontalScrollArrangement</code>’s <a href="#HorizontalScrollArrangement.Height"><code class="highlighter-rouge">Height</code></a> is <code class="highlighter-rouge">Automatic</code>.</dd>
  <dt id="HorizontalScrollArrangement.BackgroundColor" class="color"><em>BackgroundColor</em></dt>
  <dd>Specifies the background color of the HorizontalScrollArrangement as an alpha-red-green-blue
 integer.  If an Image has been set, the color change will not be visible
 until the Image is removed.</dd>
  <dt id="HorizontalScrollArrangement.Height" class="number bo"><em>Height</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">HorizontalScrollArrangement</code>’s vertical height, measured in pixels.</dd>
  <dt id="HorizontalScrollArrangement.HeightPercent" class="number wo bo"><em>HeightPercent</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">HorizontalScrollArrangement</code>’s vertical height as a percentage
 of the <a href="userinterface.html#Screen.Height"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Height</code></a>.</dd>
  <dt id="HorizontalScrollArrangement.Image" class="text"><em>Image</em></dt>
  <dd>Specifies the path of the background image of the <code class="highlighter-rouge">HorizontalScrollArrangement</code>.</dd>
  <dt id="HorizontalScrollArrangement.Left" class="number"><em>Left</em></dt>
  <dd>Specifies the position of the Left edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="HorizontalScrollArrangement.Top" class="number"><em>Top</em></dt>
  <dd>Specifies the position of the Top edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="HorizontalScrollArrangement.Visible" class="boolean"><em>Visible</em></dt>
  <dd>Specifies whether the <code class="highlighter-rouge">HorizontalScrollArrangement</code> should be visible on the screen.  Value is <code class="logic block highlighter-rouge">true</code>
 if the <code class="highlighter-rouge">HorizontalScrollArrangement</code> is showing and <code class="logic block highlighter-rouge">false</code> if hidden.</dd>
  <dt id="HorizontalScrollArrangement.Width" class="number bo"><em>Width</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">HorizontalScrollArrangement</code>, measured in pixels.</dd>
  <dt id="HorizontalScrollArrangement.WidthPercent" class="number wo bo"><em>WidthPercent</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">HorizontalScrollArrangement</code> as a percentage
 of the <a href="userinterface.html#Screen.Width"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Width</code></a>.</dd>
</dl>

<h3 id="HorizontalScrollArrangement-Events">Events</h3>

<p class="events">None</p>

<h3 id="HorizontalScrollArrangement-Methods">Methods</h3>

<p class="methods">None</p>

<h2 id="TableArrangement">TableArrangement</h2>

<p>Use a table arrangement component to display a group of components in a tabular fashion.</p>

<p>This component is a formatting element in which you place components that should be displayed
 in tabular form.</p>

<p>In a <code class="highlighter-rouge">TableArrangement</code>, components are arranged in a grid of rows and columns, with not more
 than one component visible in each cell. <strong>If multiple components occupy the same cell, only the
 last one will be visible.</strong></p>

<p>Within each row, components are vertically center-aligned.</p>

<p>The width of a column is determined by the widest component in that column. When calculating
 column width, the automatic width is used for components whose <a href="#TableArrangement.Width"><code class="highlighter-rouge">Width</code></a> property is set
 to <code class="highlighter-rouge">Fill Parent</code>. <strong>However, each component will always fill the full width of the column that it
 occupies.</strong></p>

<p>The height of a row is determined by the tallest component in that row whose <a href="#TableArrangement.Height"><code class="highlighter-rouge">Height</code></a>
 property is not set to <code class="highlighter-rouge">Fill Parent</code>. If a row contains only components whose <a href="#TableArrangement.Height"><code class="highlighter-rouge">Height</code></a>
 properties are set to <code class="highlighter-rouge">Fill Parent</code>, the height of the row is calculated using the automatic
 heights of the components.</p>

<h3 id="TableArrangement-Properties">Properties</h3>

<dl class="properties">
  <dt id="TableArrangement.Columns" class="number do"><em>Columns</em></dt>
  <dd>Determines the number of columns in the table.</dd>
  <dt id="TableArrangement.Height" class="number bo"><em>Height</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">TableArrangement</code>’s vertical height, measured in pixels.</dd>
  <dt id="TableArrangement.HeightPercent" class="number wo bo"><em>HeightPercent</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">TableArrangement</code>’s vertical height as a percentage
 of the <a href="userinterface.html#Screen.Height"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Height</code></a>.</dd>
  <dt id="TableArrangement.Left" class="number"><em>Left</em></dt>
  <dd>Specifies the position of the Left edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="TableArrangement.Rows" class="number do"><em>Rows</em></dt>
  <dd>Determines the number of rows in the table.</dd>
  <dt id="TableArrangement.Top" class="number"><em>Top</em></dt>
  <dd>Specifies the position of the Top edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="TableArrangement.Visible" class="boolean"><em>Visible</em></dt>
  <dd>Specifies whether the <code class="highlighter-rouge">TableArrangement</code> should be visible on the screen.  Value is <code class="logic block highlighter-rouge">true</code>
 if the <code class="highlighter-rouge">TableArrangement</code> is showing and <code class="logic block highlighter-rouge">false</code> if hidden.</dd>
  <dt id="TableArrangement.Width" class="number bo"><em>Width</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">TableArrangement</code>, measured in pixels.</dd>
  <dt id="TableArrangement.WidthPercent" class="number wo bo"><em>WidthPercent</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">TableArrangement</code> as a percentage
 of the <a href="userinterface.html#Screen.Width"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Width</code></a>.</dd>
</dl>

<h3 id="TableArrangement-Events">Events</h3>

<p class="events">None</p>

<h3 id="TableArrangement-Methods">Methods</h3>

<p class="methods">None</p>

<h2 id="VerticalArrangement">VerticalArrangement</h2>

<p><img src="images/verticalarrangement.png" alt="VerticalArrangement icon" /></p>

<p>Use a <code class="highlighter-rouge">VerticalArrangement</code> component to display a group of components laid out from top to
 bottom, left-aligned.</p>

<p>This component is a formatting element in which you place components that should be displayed
 one below another. The first child component is stored on top, the second beneath it, and so on.
 If you want to have components displayed next to one another, use <a href="#HorizontalArrangement"><code class="highlighter-rouge">HorizontalArrangement</code></a>
 instead.</p>

<p>In a <code class="highlighter-rouge">VerticalArrangement</code>, components are arranged along the vertical axis, left-aligned.</p>

<p>If a <code class="highlighter-rouge">VerticalArrangement</code>’s <a href="#VerticalArrangement.Width"><code class="highlighter-rouge">Width</code></a> property is set to <code class="highlighter-rouge">Automatic</code>, the actual width
 of the arrangement is determined by the widest component in the arrangement whose
 <a href="#VerticalArrangement.Width"><code class="highlighter-rouge">Width</code></a> property is not set to <code class="highlighter-rouge">Fill Parent</code>. If a <code class="highlighter-rouge">VerticalArrangement</code>’s
 <a href="#VerticalArrangement.Width"><code class="highlighter-rouge">Width</code></a> property is set to <code class="highlighter-rouge">Automatic</code> and it contains only components whose
 <a href="#VerticalArrangement.Width"><code class="highlighter-rouge">Width</code></a> properties are set to <code class="highlighter-rouge">Fill Parent</code>, the actual width of the arrangement is
 calculated using the automatic widths of the components. If a <code class="highlighter-rouge">VerticalArrangement</code>’s
 <a href="#VerticalArrangement.Width"><code class="highlighter-rouge">Width</code></a> property is set to <code class="highlighter-rouge">Automatic</code> and it is empty, the width will be 100.</p>

<p>If a <code class="highlighter-rouge">VerticalArrangement</code>’s <a href="#VerticalArrangement.Height"><code class="highlighter-rouge">Height</code></a> property is set to <code class="highlighter-rouge">Automatic</code>, the actual height
 of the arrangement is determined by the sum of the heights of the components. <strong>If a
 <code class="highlighter-rouge">VerticalArrangement</code>’s <a href="#VerticalArrangement.Height"><code class="highlighter-rouge">Height</code></a> property is set to <code class="highlighter-rouge">Automatic</code>, any components whose
 <code class="highlighter-rouge">Height</code> properties are set to <code class="highlighter-rouge">Fill Parent</code> will behave as if they were set to <code class="highlighter-rouge">Automatic</code>.</strong></p>

<p>If a <code class="highlighter-rouge">VerticalArrangement</code>’s <a href="#VerticalArrangement.Height"><code class="highlighter-rouge">Height</code></a> property is set to <code class="highlighter-rouge">Fill Parent</code> or specified in
 pixels, any components whose Height properties are set to <code class="highlighter-rouge">Fill Parent</code> will equally take up the
 height not occupied by other components.</p>

<h3 id="VerticalArrangement-Properties">Properties</h3>

<dl class="properties">
  <dt id="VerticalArrangement.AlignHorizontal" class="number"><em>AlignHorizontal</em></dt>
  <dd>A number that encodes how contents of the <code class="highlighter-rouge">VerticalArrangement</code> are aligned horizontally. The choices
 are: <code class="highlighter-rouge">1</code> = left aligned, <code class="highlighter-rouge">2</code> = right aligned, <code class="highlighter-rouge">3</code> = horizontally centered. Alignment has no
 effect if the <code class="highlighter-rouge">VerticalArrangement</code>’s <a href="#VerticalArrangement.Width"><code class="highlighter-rouge">Width</code></a> is <code class="highlighter-rouge">Automatic</code>.</dd>
  <dt id="VerticalArrangement.AlignVertical" class="number"><em>AlignVertical</em></dt>
  <dd>A number that encodes how the contents of the <code class="highlighter-rouge">VerticalArrangement</code> are aligned vertically. The choices
 are: <code class="highlighter-rouge">1</code> = aligned at the top, <code class="highlighter-rouge">2</code> = vertically centered, <code class="highlighter-rouge">3</code> = aligned at the bottom.
 Alignment has no effect if the <code class="highlighter-rouge">VerticalArrangement</code>’s <a href="#VerticalArrangement.Height"><code class="highlighter-rouge">Height</code></a> is <code class="highlighter-rouge">Automatic</code>.</dd>
  <dt id="VerticalArrangement.BackgroundColor" class="color"><em>BackgroundColor</em></dt>
  <dd>Specifies the background color of the VerticalArrangement as an alpha-red-green-blue
 integer.  If an Image has been set, the color change will not be visible
 until the Image is removed.</dd>
  <dt id="VerticalArrangement.Height" class="number bo"><em>Height</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">VerticalArrangement</code>’s vertical height, measured in pixels.</dd>
  <dt id="VerticalArrangement.HeightPercent" class="number wo bo"><em>HeightPercent</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">VerticalArrangement</code>’s vertical height as a percentage
 of the <a href="userinterface.html#Screen.Height"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Height</code></a>.</dd>
  <dt id="VerticalArrangement.Image" class="text"><em>Image</em></dt>
  <dd>Specifies the path of the background image of the <code class="highlighter-rouge">VerticalArrangement</code>.</dd>
  <dt id="VerticalArrangement.Left" class="number"><em>Left</em></dt>
  <dd>Specifies the position of the Left edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="VerticalArrangement.Top" class="number"><em>Top</em></dt>
  <dd>Specifies the position of the Top edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="VerticalArrangement.Visible" class="boolean"><em>Visible</em></dt>
  <dd>Specifies whether the <code class="highlighter-rouge">VerticalArrangement</code> should be visible on the screen.  Value is <code class="logic block highlighter-rouge">true</code>
 if the <code class="highlighter-rouge">VerticalArrangement</code> is showing and <code class="logic block highlighter-rouge">false</code> if hidden.</dd>
  <dt id="VerticalArrangement.Width" class="number bo"><em>Width</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">VerticalArrangement</code>, measured in pixels.</dd>
  <dt id="VerticalArrangement.WidthPercent" class="number wo bo"><em>WidthPercent</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">VerticalArrangement</code> as a percentage
 of the <a href="userinterface.html#Screen.Width"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Width</code></a>.</dd>
</dl>

<h3 id="VerticalArrangement-Events">Events</h3>

<p class="events">None</p>

<h3 id="VerticalArrangement-Methods">Methods</h3>

<p class="methods">None</p>

<h2 id="VerticalScrollArrangement">VerticalScrollArrangement</h2>

<p>A formatting element in which to place components that should be displayed one below another.
 (The first child component is stored on top, the second beneath it, etc.) If you wish to have
 components displayed next to one another, use <a href="#HorizontalScrollArrangement"><code class="highlighter-rouge">HorizontalScrollArrangement</code></a> instead.</p>

<p>This version is scrollable.</p>

<h3 id="VerticalScrollArrangement-Properties">Properties</h3>

<dl class="properties">
  <dt id="VerticalScrollArrangement.AlignHorizontal" class="number"><em>AlignHorizontal</em></dt>
  <dd>A number that encodes how contents of the <code class="highlighter-rouge">VerticalScrollArrangement</code> are aligned horizontally. The choices
 are: <code class="highlighter-rouge">1</code> = left aligned, <code class="highlighter-rouge">2</code> = right aligned, <code class="highlighter-rouge">3</code> = horizontally centered. Alignment has no
 effect if the <code class="highlighter-rouge">VerticalScrollArrangement</code>’s <a href="#VerticalScrollArrangement.Width"><code class="highlighter-rouge">Width</code></a> is <code class="highlighter-rouge">Automatic</code>.</dd>
  <dt id="VerticalScrollArrangement.AlignVertical" class="number"><em>AlignVertical</em></dt>
  <dd>A number that encodes how the contents of the <code class="highlighter-rouge">VerticalScrollArrangement</code> are aligned vertically. The choices
 are: <code class="highlighter-rouge">1</code> = aligned at the top, <code class="highlighter-rouge">2</code> = vertically centered, <code class="highlighter-rouge">3</code> = aligned at the bottom.
 Alignment has no effect if the <code class="highlighter-rouge">VerticalScrollArrangement</code>’s <a href="#VerticalScrollArrangement.Height"><code class="highlighter-rouge">Height</code></a> is <code class="highlighter-rouge">Automatic</code>.</dd>
  <dt id="VerticalScrollArrangement.BackgroundColor" class="color"><em>BackgroundColor</em></dt>
  <dd>Specifies the background color of the VerticalScrollArrangement as an alpha-red-green-blue
 integer.  If an Image has been set, the color change will not be visible
 until the Image is removed.</dd>
  <dt id="VerticalScrollArrangement.Height" class="number bo"><em>Height</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">VerticalScrollArrangement</code>’s vertical height, measured in pixels.</dd>
  <dt id="VerticalScrollArrangement.HeightPercent" class="number wo bo"><em>HeightPercent</em></dt>
  <dd>Specifies the <code class="highlighter-rouge">VerticalScrollArrangement</code>’s vertical height as a percentage
 of the <a href="userinterface.html#Screen.Height"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Height</code></a>.</dd>
  <dt id="VerticalScrollArrangement.Image" class="text"><em>Image</em></dt>
  <dd>Specifies the path of the background image of the <code class="highlighter-rouge">VerticalScrollArrangement</code>.</dd>
  <dt id="VerticalScrollArrangement.Left" class="number"><em>Left</em></dt>
  <dd>Specifies the position of the Left edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="VerticalScrollArrangement.Top" class="number"><em>Top</em></dt>
  <dd>Specifies the position of the Top edge of the component relative to an
 AbsoluteArrangement.</dd>
  <dt id="VerticalScrollArrangement.Visible" class="boolean"><em>Visible</em></dt>
  <dd>Specifies whether the <code class="highlighter-rouge">VerticalScrollArrangement</code> should be visible on the screen.  Value is <code class="logic block highlighter-rouge">true</code>
 if the <code class="highlighter-rouge">VerticalScrollArrangement</code> is showing and <code class="logic block highlighter-rouge">false</code> if hidden.</dd>
  <dt id="VerticalScrollArrangement.Width" class="number bo"><em>Width</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">VerticalScrollArrangement</code>, measured in pixels.</dd>
  <dt id="VerticalScrollArrangement.WidthPercent" class="number wo bo"><em>WidthPercent</em></dt>
  <dd>Specifies the horizontal width of the <code class="highlighter-rouge">VerticalScrollArrangement</code> as a percentage
 of the <a href="userinterface.html#Screen.Width"><code class="highlighter-rouge">Screen</code>’s <code class="highlighter-rouge">Width</code></a>.</dd>
</dl>

<h3 id="VerticalScrollArrangement-Events">Events</h3>

<p class="events">None</p>

<h3 id="VerticalScrollArrangement-Methods">Methods</h3>

<p class="methods">None</p>


</article>
<script>
  // Handle redirection to documentation based on locale query parameter (if specified)
  (function() {
      var locale = window.location.search.match('[&?]locale=([a-zA-Z-]*)');
      if (locale) {
          if (locale[1].indexOf('en') === 0) {
              // English needs to stay at the top level to not break existing links
              var page = window.location.pathname.split('/');
              if (page.length === 5) {
                  page.splice(2, 1);
              } else {
                  // already on english
                  return;
              }
              window.location.href = page.join('/');
          } else {
              var page = window.location.pathname.split('/');
              if (page.length === 4) {
                  page.splice(2, 0, locale[1]);
              } else if (page[2].toLowerCase() != locale[1].toLowerCase()) {
                  page[2] = locale[1];
              } else {
                  return;  // already on the desired language
              }
              // Test that the page exists before redirecting.
              var xhr = new XMLHttpRequest();
              xhr.open('HEAD', page.join('/'), false);
              xhr.onreadystatechange = function() {
                  if (xhr.readyState == 4) {
                      if ((xhr.status == 200 || xhr.status == 204)) {
                          window.location.href = page.join('/');
                      } else if (xhr.status  >= 400) {
                          page.splice(2, 1);  // go to english version
                          window.location.href = page.join('/');
                      }
                  }
              };
              xhr.send();
          }
      }
  })();

  // Handle embedded documentation in help by removing website template
  if (window.self !== window.top) {
      setTimeout(function() {
          var videos = document.querySelectorAll('video');
          for (var i = 0; i < videos.length; i++) {
              if (parseInt(videos[i].getAttribute('width')) > 360) {
                  var aspect = parseInt(videos[i].getAttribute('height')) / parseInt(videos[i].getAttribute('width'));
                  videos[i].setAttribute('width', '360');
                  videos[i].setAttribute('height', '' + (360 * aspect));
              }
          }
          var h1 = document.querySelector('h1');
          var article = document.querySelector('article');
          article.insertBefore(h1, article.firstElementChild);
          document.body.innerHTML = article.outerHTML;
      });
  }
</script>

            </div>
            <div class="footer background-green">
    <div class="row container">
	<div class="col-xl-3">
	    <h3>MIT App Inventor</h3>
	    <!-- <form class="form-inline" action="/action_page.php">
		 <div class="form-group has-search">
		 <span class="fa fa-search form-control-feedback"></span>
		 <input type="text" class="form-control" placeholder="Search">
		 </div>
		 </form> -->
	</div>
	<div class="col-xl-6 legal text-center">
	    <ul>
		<li>
		    <a href="http://web.mit.edu" class="btn btn-link" role="button"
                       target="_blank">© 2012-2024 Massachusetts Institute of Technology</a>
		</li>
		<li>
		    <a href="http://creativecommons.org/licenses/by-sa/3.0/"
                       target="_blank" class="btn btn-link" role="button">This work is licensed under a Creative Commons Attribution-ShareAlike 3.0</a>
		</li>
		<li>
		    <a href="http://appinventor.mit.edu/about/termsofservice"
                       target="_blank" class="btn btn-link" role="button">Terms of Service and Privacy Policy</a>
		</li>
	    </ul>
	</div>
	<div class="col-xl-3 links">
            <a href="https://community.appinventor.mit.edu" target="_blank">Support / Help</a><br>
            <a href="mailto:appinventor@mit.edu">Other Inquiries</a>
	    <div>
		<span>Twitter:</span>
		<a href="https://twitter.com/mitappinventor"
                   target="_blank" class="btn btn-link" role="button">@MITAppInventor</a>
	    </div>
	    <div>
	      <span>GitHub:</span>
	      <a href="https://github.com/mit-cml" class="btn btn-link" role="button"
                 target="_blank">mit-cml</a>
	    </div>
            <div>
              <span>Accessibility:</span>
              <a href="https://accessibility.mit.edu" role="button"
                 targe="_blank">accessibility.mit.edu</a>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="/static/js/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="/static/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script async src="/static/js/widgets.js" charset="utf-8"></script>
</div>
    </body>
</html>
